<template>
	<div class="cover_con">
		<div class="cover_item" v-for="(cover_item, cover_index) in coverList" :key="cover_index">
			<div :style="textConStyle(cover_item)">
				<div class="text_item" :style="textItemStyle(item, index)" v-for="(item, index) in cover_item.list" :key="index">
					<div :style="coverStyle(item, index)">{{item.copywriting}}</div>
				</div>
			</div>
			<div class="operate_con">
				<span>封面_{{cover_index+1}}</span>
			</div>
			<div class="loading_con" v-if="loading">
				<LoadingOutlined style="font-size: 27px;" />
			</div>
		</div>
	</div>
</template>

<script>
	import {defineComponent, ref, reactive, toRefs, computed, watch, nextTick} from 'vue';
	import {
		PlusOutlined,
		FormOutlined,
		DeleteOutlined,
		LoadingOutlined
	} from "@ant-design/icons-vue";
	import store from '@/store';
	export default defineComponent({
		props: {
			materialList: {
				type: Array,
				default: () => {
					return []
				}
			},
			radioType: {
				type: String,
				default: '9:16'
			}
		},
		components: {
			PlusOutlined,
			FormOutlined,
			DeleteOutlined,
			LoadingOutlined
		},
		setup(props, context) {
			const state = reactive({
				coverList: [],
				loading: false
			})
			
			const textConStyle = computed(()=>{
				return function(item) {
					return {
						overflow: 'hidden',
						position: 'relative',
						backgroundImage: `url(${item.poster_url}), url('https://hf.pigcms.com/static/wxapp/images/phone_black_back.png')`,
						backgroundSize: '101% auto',
						backgroundPosition: 'center center',
						backgroundRepeat: 'no-repeat',
						width: 360/2 + 'px',
						height: props.radioType == '1:1'?360/2+'px':props.radioType == '16:9'?202.5/2+'px':640/2+'px'
					}
				}
			})
			
			const coverStyle = computed(() => {
				return function(item, index) {
					return {
						'font-family': item.font_family,
						'font-size': item.font_size/2 + 'px',
						'width': item.width/2 + 'px',
						'height': item.height/2 + 'px',
						'color': item.color,
						'background-color': item.backgroundColor,
						'display': 'flex',
						'align-items': item.verticle_position == 'top' ? 'start' : item
							.verticle_position == 'center' ? 'center' : 'end',
						'justify-content': item.align_type == 'left' ? 'start' : item.align_type ==
							'center' ? 'center' : 'end',
						'opacity': item.opacity
					}
				}
			})
			
			const textItemStyle = computed(()=>{
				return function(item, index) {
					return {
						'position': 'absolute',
						'width': item.width/2 + 'px',
						'height': item.height/2 + 'px',
						'left': item.elLeft/2 +'px',
						'top': item.elTop/2 +'px'
					}
				}
			})
			
			const customFont = (name, url) => {
				const fontFace = new FontFace(name, `url(${url})`);
				fontFace.load().then(() => {
					document.fonts.add(fontFace);
					state.loading = false
				}).catch((error) => {	
					console.error(error);
					state.loading = false
				});
			}
			
			if(props.materialList?.length && props.materialList[0]?.originData){
				state.coverList = props.materialList[0]?.originData
				state.loading = true
				state.coverList.map((first_item, first_index)=>{
					first_item.list.map((second_item, second_index)=>{
						customFont(second_item.font_family, second_item.typeface)
					})
				})
			}
			
			return {
				coverStyle,
				textItemStyle,
				textConStyle,
				...toRefs(state)
			}
		}
	})
</script>

<style lang="less" scoped>
	.cover_con{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding-bottom: 30px;
		.cover_item{
			background: #000;
			border-radius: 5px;
			width: 180px;
			min-height: 320px;
			margin-top: 30px;
			margin-left: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: relative;
			.loading_con{
				position: absolute;
				width: 100%;
				height: 320px;
				background-color: rgba(0, 0, 0, .3);
				left: 0;
				top: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
			
			&:hover{
				.operate_con{
					.operate_icon{
						display: block;
					}
				}
			}
			.operate_con{
				position: absolute;
				width: 100%;
				height: 35px;
				display: flex;
				align-items: center;
				justify-content: center;
				left: 0;
				bottom: -35px;
				color: #333;
			}
		}
	}
</style>